<template>
  <div class="orderPrint">
    <section ref="print">
      <div id="printArea">
        <h3 class="title" style="color:#606266;text-align:center">楼盘佣金结算清单</h3>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鉴于双方友好合作， <u>{{devInfo.companyName}}</u>公司<u>{{devInfo.projectName}}</u>项目与好生活签订网络推广服务合同， 
          本次合作为
          <span v-show="devInfo.coOp == 0" class=""><u>会员付费</u></span>
          <span v-show="devInfo.coOp == 1"><u>企业付费</u></span>
          <span v-show="devInfo.coOp == 2"><u>会员+企业付费</u></span>
          方式，自<u>{{minTime}}</u>至<u>{{maxTime}}</u>期间， <u>{{devInfo.projectName}}</u>共签约售出<u>{{recordList.length}}套</u>房屋，本次应收取佣金共计<u>{{totalAmountTotal | moneyFilter}}</u>元，特此说明。
        </p>
        <div class="tal">
          <table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
            <tr style="height:40px;text-align:center" >
              <td style="padding:5px;">序号</td>
              <td style="padding:5px;">城市</td>
              <td style="padding:5px;">客户姓名</td>
              <td style="padding:5px;">手机号</td>
              <td style="padding:5px;">楼盘名称</td>
              <td style="padding:5px;">房间号</td>
              <td style="padding:5px;">面积</td>
              <td style="padding:5px;">客户状态</td>
              <td style="padding:5px;">成交价</td>
              <td style="padding:5px;">房款</td>
              <td style="padding:5px;">套餐名称</td>
              <td style="padding:5px;">好生活总收入金额</td>
              <td style="padding:5px;">前佣</td>
              <td style="padding:5px;">后佣</td>
              <td style="padding:5px;">经纪人奖励</td>
              <td style="padding:5px;">奖励来源</td>
              <td style="padding:5px;">渠道佣金</td>
              <td style="padding:5px;">渠道前拥</td>
              <td style="padding:5px;">渠道后佣</td>
              <td style="padding:5px;">渠道经纪人奖励</td>
              <td style="padding:5px;">渠道公司</td>
              <td style="padding:5px;">交易时间</td>
            </tr>
            <tr v-for="(item,idx) in recordList" :key="idx"  style="height:40px;text-align:center; page-break-after: always;">
              <td style="padding:5px;">{{idx+1}}</td>
              <td style="padding:5px;">{{item.cityName}}</td>
              <td style="padding:5px;">{{item.customerName}}</td>
              <td style="padding:5px;">{{item.customerPhone}}</td>
              <td style="padding:5px;">{{item.devName}}</td>
              <td style="padding:5px;">{{item.houseNum}}</td>
              <td style="padding:5px;">{{item.houseArea}}</td>
              <td style="padding:5px;">{{item.nodeName}}</td>
              <td style="padding:5px;">{{item.dealAmount}}</td>
              <td style="padding:5px;">{{item.devAmount}}</td>
              <td style="padding:5px;">{{item.packageName}}</td>
              <td style="padding:5px;">{{item.amountTotal}}</td>
              <td style="padding:5px;">{{item.frontAmount}}</td>
              <td style="padding:5px;">{{item.afterAmount}}</td>
              <td style="padding:5px;">{{item.awardAmountTotal}}</td>
              <td style="padding:5px;">
                <span v-show="item.awardSource == 1">开发商返还款</span>
                <span v-show="item.awardSource == 2">后佣回款</span>
                <span v-show="!item.awardSource">-</span>
              </td>
              <td style="padding:5px;">{{item.brokerAmount}}</td>
              <td style="padding:5px;">{{item.brokerAmountFront}}</td>
              <td style="padding:5px;">{{item.brokerAmountAfter}}</td>
              <td style="padding:5px;">{{item.brokerAwardAmount}}</td>
              <td style="padding:5px;">{{item.companyName?item.companyName:'-'}}</td>
              <td style="padding:5px;">{{item.dealTime}}</td>
            </tr>
          </table>
          <div class="sign" style="height :130px;">
            <div style="display :inline-block;">
              <p>甲方：</p>
              <p>项目负责人：</p>
              <p>日期：</p>
            </div>
            <div style="display :inline-block;margin-left :60%;">
              <p>乙方：</p>
              <p>好生活经服负责人：</p>
              <p>日期：</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="btn">
      <el-button type="primary" size="mini" @click="handleClose">关闭</el-button>
      <el-button type="primary" size="mini" @click="handlePrint">打印</el-button>
    </div>
  </div>
</template>

<script>
import api from "@/api/apiPath"
import util from "@/common/utils"
export default {
  name:"orderPrint",
  components: {},
  data() {
    return {
      recordList:[],
      devInfo:{} ,
      totalAmountTotal:0,
      maxTime:undefined,
      minTime:undefined
    }
  },
  filters:{
    moneyFilter(val){
      return util.formatMoney(val)
    }
  },
  mounted() {},
  created() {
    // this.getDevInfo()
  },
  methods: {
    // initPhone(row, column, cellValue, index){
    //   return util.formatPhoneNumber(cellValue)
    // },
    // initMoney(row, column, cellValue, index){
    //   return util.formatMoney(cellValue)
    // },
    // initTime(row, column, cellValue, index){
    //   return util.getTimeString(cellValue)
    // },
    getDevInfo(){
      // this.recordList = JSON.parse(this.$route.query.tal)
      this.recordList = JSON.parse(window.sessionStorage.getItem('tal'))
      this.totalAmountTotal = 0
      let timeArr = []
      this.recordList.forEach(item=>{
        timeArr.push(item.dealTime)
        this.totalAmountTotal = item.amountTotal + this.totalAmountTotal
        item.customerPhone = util.formatPhoneNumber(item.customerPhone)
        item.dealAmount = util.formatMoney(item.dealAmount)
        item.devAmount = util.formatMoney(item.devAmount)
        item.amountTotal = util.formatMoney(item.amountTotal)
        item.frontAmount = util.formatMoney(item.frontAmount)
        item.afterAmount = util.formatMoney(item.afterAmount)
        item.awardAmountTotal = util.formatMoney(item.awardAmountTotal)
        item.awardAmountTotal = util.formatMoney(item.brokerAmount)
        item.awardAmountTotal = util.formatMoney(item.brokerAmountFront)
        item.awardAmountTotal = util.formatMoney(item.brokerAmountAfter)
        item.awardAmountTotal = util.formatMoney(item.brokerAwardAmount)
        item.dealTime = util.getTimeString(item.dealTime).substring(0,10)
      })
      this.maxTime = util.getTimeString(Math.max.apply(null,timeArr))
      this.minTime = util.getTimeString(Math.min.apply(null,timeArr))
      this.minTime = this.minTime.substring(0,10)
      this.maxTime = this.maxTime.substring(0,10)
      
      
      this.axios.post(api.devInfo,{
        devId:this.recordList[0].devId,
      }).then(res=>{
        console.log(res)
        if(res.data.code == 200){
          this.devInfo = res.data.data 
        }
      })
    },
    // 关闭
    handleClose(){
      this.$emit('print','print')
    },
    // 打印
    handlePrint(){
      setTimeout(() => {
          const myWindow = window.open('', '打印预览');
          const bodyHtml = window.document.getElementById('printArea').innerHTML;
          let headHtml = document.head.innerHTML;
          headHtml = headHtml.replace('screen', 'screen, print');
          //写入文档流
          myWindow.document.write('<html>');
          myWindow.document.write(headHtml + '<style>@media screen {body {display: none}}</style>');
          myWindow.document.write('<body>');
          myWindow.document.write(bodyHtml);
          //写入打印代码
          myWindow.document.write('<script>setTimeout(function() {window.print(); window.close();}, 500)</');
          myWindow.document.write('script>');
          myWindow.document.write('</body></html>');
      }, 100)
    },
  },
  computed: {}
}
</script>
<style lang="stylus" scoped>
  .orderPrint {
    width:100%;
    #printArea{
      margin : 0 auto;
      width :95%;
    }
    .tal table{
      width :100%;
    }
    .title{
      text-align :center;
      color:#606266;
    }
    .sign{
      height :130px;
    }
    .sign div:nth-child(1){
      display :inline-block;
    }
    .sign div:nth-child(2){
      margin-left :60%;
      display :inline-block;
    }
    .btn{
      margin-left :200px;
    }
  }
</style>